<template>
  <div class="is_majors_detail">
    <div class="is_head">
      <div class="is_title">{{ majorInfo.name }}</div>
      <div class="is_tag">
        <span class="is_tag_item"> 专业代码：{{ majorInfo.code }} </span
        ><span class="is_tag_item"> 修业年限：{{ majorInfo.limit_year }} </span
        ><span class="is_tag_item"> 授予学位：{{ majorInfo.degree }} </span>
      </div>
    </div>
    <div class="is_menu">
      <div
        class="is_menu_item"
        v-for="(item, i) in majorType"
        :key="i"
        :class="majorTypeI == item.type ? 'is_active' : ''"
        @click="handleSelectMajorType(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <template v-if="majorTypeI == 1">
      <div class="is_com">
        <div class="info_wrap">
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              专业简介
            </div>
            <div class="is_ans_area">
              <div class="is_title1">是什么</div>
              <div class="is_body">
                {{ majorInfo.is_what }}
              </div>
              <div class="is_title1">学什么</div>
              <div class="is_body">
                {{ majorInfo.learn_what }}
              </div>
              <div class="is_title1">干什么</div>
              <div class="is_body">
                {{ majorInfo.do_what }}
              </div>
            </div>
          </div>
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              专业排名/就业分析
            </div>
            <div
              class="is_ans_area"
              v-for="(item, i) in JSON.parse(majorInfo.job_ranks)"
              :key="i"
            >
              <div class="is_title1" style="font-weight: 600">
                {{ item.key }}
              </div>
              <div class="is_body" style="margin-bottom: 10px">
                {{ item.value }}
              </div>
            </div>
          </div>
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              选考学科建议： {{ majorInfo.subjects_require }}
            </div>
          </div>
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              开设课程：
            </div>
            <div class="is_text">
              {{ majorInfo.course }}
            </div>
          </div>
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              考研方向：
            </div>
            <div class="is_text">{{ majorInfo.direction }}</div>
          </div>
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              专业名人：
            </div>
            <div class="is_text">
              {{ majorInfo.celebrity }}
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="is_com">
        <div class="info_wrap">
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              工资待遇怎么样？
            </div>
            <div class="is_ans_area">
              <div class="major_money">
                ￥{{ formatToK(majorInfo.salary_avg / 12) }}
                <span>月平均工资</span>
              </div>
              <div class="major_job_analysis">可从事岗位工资分析</div>
            </div>
            <div class="major_job_item">
              <div
                class="job_item"
                v-for="(item, i) in JSON.parse(majorInfo.salary_jobs)"
                :key="i"
              >
                <div class="item_title">{{ item.key }}</div>
                <div class="item_money">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="info_wrap">
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              就业地区分布
            </div>
            <div class="area_head">
              <div class="rank">排名</div>
              <div class="area">地区</div>
              <div class="job_sum">职位量</div>
              <div class="gdp">占比</div>
            </div>
            <div
              class="area_body"
              v-for="(item, i) in JSON.parse(majorInfo.job_city).splice(
                1,
                JSON.parse(majorInfo.job_city).length
              )"
              :key="i"
            >
              <div class="rank">{{ i + 1 }}</div>
              <div class="area">{{ item.key }}</div>
              <div class="job_sum">{{ handleContent(item.value, 1) }}</div>
              <div class="gdp">{{ handleContent(item.value, 2) }}</div>
            </div>
          </div>
        </div>
        <div class="info_wrap">
          <div class="is_item">
            <div class="is_title">
              <div class="is_shu"></div>
              就业行业分布
            </div>
            <div class="area_head">
              <div class="rank">排名</div>
              <div class="area">专业名称</div>
              <div class="job_sum">职位量</div>
              <div class="gdp">占比</div>
            </div>
            <div
              class="area_body"
              v-for="(item, i) in JSON.parse(majorInfo.job_industry).splice(
                1,
                JSON.parse(majorInfo.job_industry).length
              )"
              :key="i"
            >
              <div class="rank">{{ i + 1 }}</div>
              <div class="area">{{ item.key }}</div>
              <div class="job_sum">{{ handleContent(item.value, 1) }}</div>
              <div class="gdp">{{ handleContent(item.value, 2) }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { majorDetail } from "@/api/index";
export default {
  name: "",
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      majorTypeI: 1,
      majorType: [
        { name: "专业概况", type: 1 },
        { name: "就业相关", type: 2 },
      ],
      majorInfo: {},
    };
  },
  beforeRouteEnter(to, from, next) {
    console.log("to", to);
    next((vm) => {
      // 页面进入时执行的代码
      vm.getQueryParams(to.query.id); // 例如调用方法获取数据
    });
  },
  methods: {
    /*
     * author：Gengbaodada
     * create by date：2025/05/15
     * content：正则匹配数据
     */
    handleContent(value, type) {
      const regex = /(\d+)(\s\d+(\.\d+)?%)/;
      const result = value.match(regex);
      if (result) {
        return type == 1 ? result[1] : result[2];
      }
      console.log("result", result);
      // return type == 1 ? result[1] : result[2];
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/15
     * content：转换工资K
     */
    formatToK(value) {
      const result = (value / 1000).toFixed(1); // 将值除以1000并保留一位小数
      return result + "K";
    },
    handleSelectMajorType(item) {
      this.majorTypeI = item.type;
    },
    getQueryParams(id) {
      majorDetail({ major_info_id: id }).then((response) => {
        this.majorInfo = response.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.area_body {
  width: 70%;
  display: flex;
  font-size: 16px;
  .rank {
    width: 10%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .area {
    width: 30%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .job_sum {
    width: 15%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .gdp {
    width: 15%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
}
.area_head {
  width: 70%;
  display: flex;
  font-size: 16px;
  margin-top: 20px;
  .rank {
    width: 10%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .area {
    width: 30%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .job_sum {
    width: 15%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .gdp {
    width: 15%;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
}
.major_job_item {
  display: flex;
  flex-wrap: wrap;
  .job_item {
    text-align: center;
    width: 130px;
    height: 80px;
    margin: 20px 20px 0 0;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    color: #222224;
    font-size: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    .item_money {
    }
    .item_title {
      color: #fe6a11;
    }
  }
}
.major_job_analysis {
  color: #222224;
  font-size: 12px;
  margin-top: 10px;
}
.major_money {
  font-weight: 600;
  font-size: 18px;
  color: #fe6a11;
  span {
    font-weight: 400;
    color: #ccc;
    font-size: 12px;
  }
}
.is_majors_detail {
  padding-top: 20px;
}
.is_majors_detail .is_head {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.is_majors_detail .is_head .is_title {
  font-size: 20px;
  margin-bottom: 20px;
}

.is_majors_detail .is_head .is_tag {
  font-size: 14px;
}

.is_majors_detail .is_head .is_tag .is_tag_item {
  color: #826e82;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
}

.is_majors_detail .is_menu {
  width: 100%;
  border-bottom: 1px solid #ff6602;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
}

.is_majors_detail .is_menu .is_menu_item {
  width: 124px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  color: #ff6602;
  background: rgba(255, 102, 2, 0.03);
  cursor: pointer;
}

.is_majors_detail .is_menu .is_active {
  color: #fff;
  background: #ff6602;
}

.is_majors_detail .is_com {
  width: 100%;
}
.info_wrap {
  width: 100%;
}

.info_wrap .is_item {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.info_wrap .is_item .is_title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.info_wrap .is_item .is_title .is_shu {
  width: 4px;
  height: 20px;
  background-color: #fe6a11;
  border-radius: 3px;
  margin-right: 10px;
}

.info_wrap .is_item .is_text {
  font-size: 13px;
  color: #555;
  margin-top: 20px;
}

.info_wrap .is_item .is_ans_area {
  border: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
  border-radius: 5px;
}

.info_wrap .is_item .is_ans_area .is_title1 {
  font-size: 16px;
  font-weight: 400;
}

.info_wrap .is_item .is_ans_area .is_body {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  margin-top: 10px;
}

.info_wrap {
  width: 100%;
}

.info_wrap .is_item {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.info_wrap .is_item .is_title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.info_wrap .is_item .is_title .is_shu {
  width: 4px;
  height: 20px;
  background-color: #fe6a11;
  border-radius: 3px;
  margin-right: 10px;
}

.info_wrap .is_item .is_text {
  font-size: 13px;
  color: #555;
  margin-top: 20px;
}

.info_wrap .is_item .is_ans_area {
  border: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
  border-radius: 5px;
}

.info_wrap .is_item .is_ans_area .is_table_item {
  width: 100%;
  height: 40px;
  font-size: 16px;
}

.info_wrap .is_item .is_ans_area .is_title1 {
  font-size: 16px;
  font-weight: 400;
}

.info_wrap .is_item .is_ans_area .is_title2 {
  color: #ccc;
  font-size: 12px;
}

.info_wrap .is_item .is_ans_area .is_title2 span {
  font-weight: 600;
  font-size: 18px;
  color: #fe6a11;
}

.info_wrap .is_item .is_ans_area .is_title3 {
  color: #222224;
  font-size: 12px;
  margin-top: 10px;
}

.info_wrap .is_item .is_ans_area .is_body {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  margin-top: 10px;
}

.info_wrap .is_item .is_ans_area .is_mode_box {
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.info_wrap .is_item .is_ans_area .is_mode_box .is_mode_box_item {
  text-align: center;
  width: 130px;
  height: 80px;
  margin: 20px 20px 0 0;
  border-radius: 10px;
  border: 1px solid #f1f1f1;
  color: #222224;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.info_wrap .is_item .is_ans_area .is_mode_box .is_mode_box_item p:first-child {
  color: #fe6a11;
}

.is_majors_detail .is_head {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.is_majors_detail .is_head .is_title {
  font-size: 20px;
  margin-bottom: 20px;
}

.is_majors_detail .is_head .is_tag {
  font-size: 14px;
}

.is_majors_detail .is_head .is_tag .is_tag_item {
  color: #826e82;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
}

.is_majors_detail .is_menu {
  width: 100%;
  border-bottom: 1px solid #ff6602;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
}

.is_majors_detail .is_menu .is_menu_item {
  width: 124px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  color: #ff6602;
  background: rgba(255, 102, 2, 0.03);
  cursor: pointer;
}

.is_majors_detail .is_menu .is_active {
  color: #fff;
  background: #ff6602;
}

.is_majors_detail .is_com {
  width: 100%;
}
</style>
